<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
    <style type="text/css">
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var mapLayersArr = [];

    //TODO:超图方式
    var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
    var resolutions = [0.703125, 0.35156249999999994, 0.17578124999999997, 0.08789062499999999, 0.04394531249999999, 0.021972656249999997, 0.010986328124999998, 0.005493164062499999, 0.0027465820312499996, 0.0013732910156249998, 0.0006866455078124999, 0.00034332275390624995, 0.00017166137695312497, 0.00008583068847656249, 0.00004291534423828124, 0.00002145767211914062, 0.00001072883605957031, 0.000005364418029785155]
    var origin = [-180, 90]

    // var projection = ol.proj.get("EPSG:4326");
    // var projectionExtent = projection.getExtent();
    // var size = ol.extent.getWidth(projectionExtent) / 256;
    // var resolutions = [];
    // for (var z = 2; z < 19; ++z) {
    //     resolutions[z] = size / Math.pow(2, z);
    // }

    var tileLayer = new ol.layer.Tile({
        source: new ol.source.WMTS({
            name: "中国矢量1-4级",
            // url: "http://t{0-6}.tianditu.com/vec_c/wmts?tk=5511da246effc06002661c77fea80ba1",
            url: "https://t2.tianditu.gov.cn/vec_c/wmts?tk=5511da246effc06002661c77fea80ba1",
            layer: "vec",
            style: "default",
            // matrixSet: "w",
            matrixSet: "c",
            format: "tiles",
            wrapX: true,
            tileGrid: new ol.tilegrid.WMTS({
                origin: origin,
                //resolutions: res.slice(0, 15),
                resolutions: resolutions,
                matrixIds: matrixIds
            })
        }),
    });
    mapLayersArr.push(tileLayer);

    var map_cta = new ol.layer.Tile({
        source: new ol.source.WMTS({
            name: "中国矢量注记1-4级",
            // url: "http://t{0-6}.tianditu.com/cva_c/wmts?tk=5511da246effc06002661c77fea80ba1",
            url: "https://t2.tianditu.gov.cn/cva_c/wmts?tk=5511da246effc06002661c77fea80ba1",
            layer: "cva",
            style: "default",
            // matrixSet: "w",
            matrixSet: "c",
            format: "tiles",
            wrapX: true,
            tileGrid: new ol.tilegrid.WMTS({
                origin: origin,
                resolutions: resolutions,
                matrixIds: matrixIds
            })
        }),
    });
    mapLayersArr.push(map_cta);


    var map = new ol.Map({
        layers: mapLayersArr,
        target: "map",
        view: new ol.View({
            center: [120.14805, 30.26971],
            projection: projection,
            zoom: 3,
            maxZoom: 17,
            minZoom: 1
        })
    });
</script>
</body>
</html>